import React,{useState,useEffect} from 'react'
import './header.css'
import { DownOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import {Modal} from 'antd';
import Zhuangdan from '../Content/Zhuangdanchaxun'
import AddCustomer from '../Content/AddCustomer';

 function Header(props) {

  // 使父组件调用子组件的方法
  let ChildRef = React.createRef();
  
    const [classIndex,setClassIndex] = useState("0")
    function changeClass(e){
      setClassIndex(e.currentTarget.getAttribute("data-index"));
      // 传递第一个标题
      props.setOneTitle(classIndex)
    }
    useEffect(()=>{
      props.setOneTitle(classIndex)
    },[classIndex])

    const handleEvent=(e)=>{
      setIsModalVisibleTwo(true)
    }
   
    
    function newcus(){
      props.addNewCus()
      setIsModalVisibleTwo(true);
    }

  const handleOkTwo = () => {
    document.removeEventListener('getCusInfo', handleEvent)
    setIsModalVisibleTwo(false);
    // 调用子组件方法
    ChildRef.current.addCusInfo()
  };

  const handleCancelOne = () => {
      setIsModalVisibleOne(false);
  };
   const [isModalVisibleOne, setIsModalVisibleOne] = useState(false);
   const [isModalVisibletwo, setIsModalVisibleTwo] = useState(false);
     // alert("新增客户");
    useEffect(()=>{
      if(props.cusInfo.updataInfo === "true"){
        setIsModalVisibleTwo(true)
        ;
      }
    },[props.cusInfo.cusInfo])
    
   
    const handleOkOne = () => {
      setIsModalVisibleOne(false);
    };
  
    const handleCancelTwo = () => {
      setIsModalVisibleTwo(false);
      // ChildRef.current.clearInput()
    };
    
    const [arrowchange,setArrowchange] = useState(props.isShow.isShow);
       console.log(props.isShow.isShow);
    function clickHeighSearch(){
        setArrowchange(!arrowchange)
        if(arrowchange){
          props.showDown()
        }else{
          props.showUp()
        }
    }   
    // 获取搜索的值
    const [searchValue,setSearchValue]=useState('')
    function getSearchText(){
      // 传送输入框的值
      props.setSearchText(searchValue)
    }

    return (
        <div id='header'>
            <div className='leftTitle'>
                {/* eslint-disable-next-line */}
              <div className={"0"==classIndex?"active":""} onClick={changeClass} data-index="0"><span>客户管理</span><span>4</span></div>
			        <div className={"1"===classIndex?"active":""} onClick={changeClass} data-index="1"><span>今日新增</span><span>4</span></div>
			        <div className={"2"===classIndex?"active":""} onClick={changeClass} data-index="2"><span>本周新增</span><span>4</span></div>
			        <div className={"3"===classIndex?"active":""} onClick={changeClass} data-index="3"><span>本月新增</span><span>4</span></div>
			        <div className="newcus" onClick={newcus}><span>新增客户</span></div>
            </div>
            <div className='rightSearch'>
                <div><input type="text" placeholder='客户名称 手机号码' onChange={e=>{setSearchValue(e.target.value)}}/></div>
                <div onClick={getSearchText}>搜索</div>
                <div onClick={clickHeighSearch}>高级搜索<span><DownOutlined className={arrowchange?"arrowup":"arrowdown"}/></span></div>
            </div>

            <Modal title="撞单查询" visible={isModalVisibleOne}  onOk={handleOkOne} onCancel={handleCancelOne} width="1000px"> 
                <Zhuangdan />
            </Modal>

            <Modal title="新增客户" visible={isModalVisibletwo} onOk={handleOkTwo} onCancel={handleCancelTwo} width="550px" updatas>
              <AddCustomer onRef={ChildRef}/>
            </Modal>
        </div>
    )
}

const mapStateToProps = (state)=>{
    return {
      isShow:state.isShow,
      cusInfo:state.updataCus
    }
  }
const mapDispatchToProps = (dispatch)=>{
    return {
      showDown(){
        const action = {type:"showDown"}
        dispatch(action)
      },
      showUp(){
        const action = {type:"showUp"}
        dispatch(action)
      },
      addNewCus(){
        const action = {type:"newAddCus"}
        dispatch(action)
      },
      setOneTitle(data){
        const action = {type:"setOneTitle",data}
        dispatch(action)
      },
      setSearchText(data){
        const action = {type:"setSearchText",data}
        dispatch(action)
      }
    }
  }


export default connect(mapStateToProps,mapDispatchToProps)(Header)